<style scoped>
.tab-item{
    padding-top: 30rpx;
    padding-bottom: 30rpx;
}
.tab-line{height:28rpx; width: 1px; background: #ccc;}
.tab-item.active{
    color: #0092FF;
}
.tab-item.unactive{
    color: #666666;
}
.list-item {
	display: flex;
	align-items: center;
    padding-top: 13px;
    padding-bottom: 10px;
    box-sizing: border-box;
}
.list-item .title {
    width:100px;
}
.list-item input {
    padding-left: 10px;
    padding-right: 10px;
}
/deep/.input-placeholder {
    font-size: 14px;
	color: #c8c8c8;
}
.radio-item {
    width: 33.33333%;
}
textarea {
    background-color: #f7f8fa;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
}
.textAreaStyle{
	color: #c8c8c8;
}
.my-apply-history{
    right: 0;
    bottom: 120px;
    background-color: #0092FF;
    color: #fff;
    text-align: center;
    min-height: 50px;
    min-width: 50px;
    border-radius: 50%;
    z-index: 999;
	box-shadow: 0px 1px 1px 2px #b2cbe1;
}
</style>
<template>
    <view class="page" style="background-color: white !important;">
		<!-- <u-picker v-model="isShowPickerTime" mode="time" start-year="1860" :default-time="defaultValue['time']"
			@confirm="confirmPicker($event, 'time')"></u-picker> -->
		
        <view class="container font-color-666 font-color-fff">
			<uni-forms :modelValue="form" ref="form" label-position="top" err-show-type="undertext" label-width="300" :border="true">
				<view class="box">
					<uni-forms-item required label="活动主题">
						<input
						    type="text"
						    v-model="form.title"
						    placeholder="请输入活动主题"
							maxlength="20"
						/>
					</uni-forms-item>
					<uni-forms-item required label="活动时间">
						<picker class="" mode="date" :value="form.time" start="2022-01-01" end="2032-01-01" @change="bindDateChange">
						    <view class="uni-input font-size-16 pad-l-10" v-if="form.time">{{form.time}}</view>
							<view class="font-color-ccc" v-else>
								请选择活动时间
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item required label="活动地点">
						<input v-model="form['address']" placeholder="请选填写活动地点" maxlength="30"/>
					</uni-forms-item>
				</view>
				<view class="mar-t-10 border-t-1" style="padding: 10px 0;">
					<view class="title box">
						<text>志愿者</text>
					</view>
					<view class="listcard flex flex-column fs-14 mar-b-5 mar-t-10" v-for="(item,index) in form.volunteer" :key="index">
						<view class="flex align-center justify-between font-size-14">
							<text class="">姓名:{{item.name}}</text>
						</view>
						<view class="mar-t-5 flex align-center justify-between font-size-14">
							<text class="">联系方式:{{item.mobile}}</text>
						</view>
						<view class="flex align-center align-end mar-t-5 font-size-14">
							<text class="fc-base flex-1 text-center" @click="toEditViewBtn(item,'look',index)">查看</text>
							<text class="fc-base flex-1 text-center mar-l-10" @click="toEditViewBtn(item,'edit',index)">编辑</text>
							<text class="fc-red flex-1 text-center mar-l-10" @click="deleteBtn(item,index)">移除</text>
						</view>
					</view>
					<view class="fc-333 mar-t-10">
						<view class="flex align-center justify-center">
							<text class="iconfont icon-add-bold font-szie-16"></text>
							<text class="font-size-15 mar-l-5" @click="toEditViewBtn(null,'add',null)">添加</text>
						</view>
					</view>
				</view>
				<uni-forms-item required label="参与人数">
					<input v-model="form['num']" placeholder="请选填写参与人数" maxlength="30"/>
				</uni-forms-item>
				<uni-forms-item required label="过程简介">
					<textarea cols="30" rows="10" placeholder="请填写过程简介" v-model="form.desc" placeholder-class="textAreaStyle">
					</textarea>
				</uni-forms-item>
			</uni-forms>
        </view>
        <button class="confirm-btn mar-t-20" @click="confirm" :loading="isSubmitBtnDisable">提交申请</button>
        <view style="height:60px"></view>
    </view>
</template>

<script>
import {homeApply,homeApplyDetail,getSocialType} from '@/utils/http'
import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue'
import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue'
export default {
	components:{
		uniForms,uniFormsItem
	},
    data() {
        return {
            birthday:this.getDate(),
			zhen:'',
			zhenList:['灵溪镇','桥墩镇','马站镇','钱库镇','金乡镇','望里镇','宜山镇','藻溪镇','莒溪镇','南宋镇','矾山镇','炎亭镇','大渔镇','赤溪镇','沿浦镇','霞关镇','岱岭畲族乡','凤阳畲族乡'],
			zhenIndex:'',
            form:{
				title:'',
				time:'',
				address:'',
				volunteer:[{name:'张三丰',mobile:'13958776325'},{name:'张大大',mobile:'13958776333'}],
				num:'',
				desc:'',
				photo:[],
				evaluate:'',
				admin:'',
				adminMobile:''
			},
			rules: {
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请填写活动名称'
						}
					]
				},
				time: {
					rules: [
						{
							required: true,
							errorMessage: '请填写活动时间'
						}
					]
				}
			},
			isShowPickerTime:false,
			isSubmitBtnDisable:false,
			defaultValue: {
				time:'2022-01-01',
			},
        }
    },
    computed: {
        startDate() {
            console.log();
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
	onLoad(option) {
	    // this.getSocialType()
		this.bus.$on('formAdd', (data) => {
			console.log('formAdd',data)
		});
		this.bus.$on('formEdit', (data) => {
			console.log('formEdit',data)
		});
	},
	onReady() {
		console.log('onReady')
		this.$refs.form.setRules(this.rules);
	},
    methods: {
		confirmPicker(e, mode) {
			if (mode == 'time') {
				let value = this.getDateYMD(e.timestamp * 1000);
				console.log('value',value)
				// this.defaultValue[this.field] = value;
				// this.allForm[this.form_name][this.field] = value;
				// uni.setStorageSync(this.form_name,this.allForm[this.form_name])
			}
		},
		deleteBtn(item,index){
			this.showModelTip(`是否确定要移除?`,()=>{
				this.successToShow('移除成功')
				this.form['volunteer'].splice(index, 1);
				this.$forceUpdate()
			},true)
		},
		toEditViewBtn(item,type,index){
			getApp().globalData.editItem = item
			if(type=='look'||type=='edit'){
				getApp().globalData.editItem = item
			}else if(type=='add'){
				getApp().globalData.editItem = ''
			}
			this.href(`/pages/social/actRecordVolunteerEdit?status=${type}&&index=${index}`)
		},
		confirm(){
			if(!this.form.title){
				uni.showModal({
					title:'提示',
					content:'请填写活动主题',
					showCancel:false
				})
				return
			}
			this.$refs.form.validate().then(res => {
				console.log('表单数据信息：', res)
				let params = this.form
				console.log('params：', params)
			})
			.catch(err => {
				console.log('表单错误信息：', err)
			})
			// this.isSubmitBtnDisable = true
			// console.log('this.form',this.form)
		},
		showPickerTime(){
			this.isShowPickerTime = true;
		},
		getSocialType() {
			getSocialType().then(res=>{
			    if(res){
			        console.log('getSocialType——res',res);
			       this.typeList = res.type
				   this.relationshipList = res.relation
			    }
			})
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value)
			this.zhenIndex = e.target.value
			this.zhen = this.zhenList[this.zhenIndex]
		},
		onchangeZhen(e){
			const value = e.detail.value
			console.log('value',value)
		},
        radioChange(e){
            // this.type_name = e.detail.value;
			// console.log('this.type_name',this.type_name)
			this.typeIndex = e.target.value
			this.type = this.typeList[this.typeIndex]
			console.log('this.type',this.type)
        },
		bindPickerChangeRelationship(e){
			this.relationshipIndex = e.target.value
			this.guardianship[0].relase = this.relationshipList[this.relationshipIndex]
        },
		bindPickerChangeRelationship2(e){
			this.relationshipIndex2 = e.target.value
			this.guardianship[1].relase = this.relationshipList[this.relationshipIndex2]
		},
        sexChange(e){
            console.log(e);
            this.child_sex = e.detail.value
        },
        familyChange(e){
            this.family_relation = e.detail.value
           
        },
        bindDateChange: function(e) {
            this.form.time = e.target.value
        },
        homeApplyDetail(id){
            homeApplyDetail({id}).then(res=>{
                this.info = res;
                this.child_usernme = res.child_usernme
                this.child_sex = res.child_sex
                this.birthday = this.transformTime( res.birthday)
				let address = res.home_address
				this.zhen = address.split(',')[1]
                this.home_address = address.split(',')[2]
                this.card_num = res.card_num
                this.school = res.school
                this.health = res.health
                this.remark = res.remark
                this.type_name = res.type_name
				this.type = res.type_name
				this.guardianship = res.guardianship
            })
        }
    }
};
</script>